<template>
  <el-checkbox-group
    :value="value"
    :disabled="disabled"
    style="margin-left: 100px"
    @input="handleInput">
    <el-checkbox v-for="role in allcheckboxs" :label="role.code_id" :key="role.code_id" :value="role.code_id" >
      {{ role.code_cn_desc }}
    </el-checkbox>
  </el-checkbox-group>
</template>

<script>
import { mapGetters } from 'vuex'
import request from '@/utils/request'
import SERVER from '@/api/server'
export default {
  name: 'Checkbox',
  model: {
    prop: 'value',
    event: 'input'
  },
  props: {
    url: String,
    model: String,
    value: {
      type: Array,
      default() {
        return []
      }
    },
    type: [String, Number],
    checkid: [String, Number],
    checkname: [String, Number],
    disabled: {
      type: Boolean,
      default() {
        return false
      }
    },
    allChecked: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  data() {
    return {
      allcheckboxs: [],
      requesturl: ''
    }
  },

  computed: {
    ...mapGetters(['dictMap'])
  },
  watch: {
    url: {
      handler(curVal, oldVal) {
        this.querybyurl()
      },
      immediate: true
    },
    type: {
      handler(curVal, oldVal) {
        this.querybytype()
      },
      immediate: true
    }
  },
  methods: {
    querybyurl() {
      if (this.url !== undefined) {
        this.requesturl = `${SERVER[this.model]}` + this.url
        request
          .get(this.requesturl)
          .then(response => {
            response.forEach(
              el => (
                // eslint-disable-next-line no-sequences
                (el.code_id = el[this.checkid]),
                (el.code_cn_desc = el[this.checkname])
              )
            )
            this.allcheckboxs = response
          })
          .catch(err => {})
      }
    },
    querybytype() {
      if ((this.type !== undefined)) {
        this.allcheckboxs = this.dictMap[this.type]
        // 是否全选
        if (this.allChecked) {
          this.allcheckboxs.forEach(
            el => (this.value.push(el.code_id)
            ))
        }
      }
    },
    handleInput(event) {
      this.$emit('input', event)
    }
  }
}
</script>

<style scoped>
</style>
